<!-- 在线考试 -->
<template>
  <div class="app-container">
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card style="margin-bottom: 10px">
          距离考试结束还有：
          <exam-timer v-model="paperData.leftSeconds" @timeout="dohandler()"></exam-timer>
          <el-button :loading="loading" style="float: right; margin-top: -10px" type="primary" @click="handPapers()">
            {{ handleText }}
          </el-button>
        </el-card>
      </el-col>
      <el-col :span="5" :xs="24" style="margin-bottom: 10px">
        <el-card class="content-h">
          <p class="card-title">答题卡</p>
          <el-row :gutter="24" class="card-line" style="padding-left: 10px">
            <el-tag type="info">未作答</el-tag>
            <el-tag type="info">已作答</el-tag>
          </el-row>
          <div v-if="
            paperData.radioList !== undefined &&
            paperData.radioList.length > 0
          ">
            <p class="card-title">单选题</p>
            <el-row :gutter="24" class="card-line">
              <el-tag v-for="item in paperData.radioList" :type="cardItemClass(item)" @click="clickCard(item)">
                {{ item.quSort + 1 }}</el-tag>
            </el-row>
          </div>

          <div v-if="
            paperData.multiList !== undefined &&
            paperData.multiList.length > 0
          ">
            <p class="card-title">多选题</p>
            <el-row :gutter="24" class="card-line">
              <el-tag v-for="item in paperData.multiList" :type="cardItemClass(item)" @click="clickCard(item)">{{
                item.quSort + 1 }}</el-tag>
            </el-row>
          </div>

          <div v-if="
            paperData.judgeList !== undefined &&
            paperData.judgeList.length > 0
          ">
            <p class="card-title">判断题</p>
            <el-row :gutter="24" class="card-line">
              <el-tag v-for="item in paperData.judgeList" :type="cardItemClass(item)" @click="clickCard(item)">{{
                item.quSort + 1 }}</el-tag>
            </el-row>
          </div>

          <div v-if="
            paperData.shortAnswerList !== undefined &&
            paperData.shortAnswerList.length > 0
          ">
            <p class="card-title">简答题</p>
            <el-row :gutter="24" class="card-line">
              <el-tag v-for="item in paperData.shortAnswerList" :type="cardItemClass(item)" @click="clickCard(item)">{{
                item.quSort + 1 }}</el-tag>
            </el-row>
          </div>
        </el-card>
      </el-col>

      <el-col :span="19" :xs="24">
        <el-card class="qu-content content-h">
          <p v-if="quData.content">
            {{ quData.quSort + 1 }}.{{ quData.content }}
          </p>
          <p v-if="quData.image != null && quData.image != ''">
            <el-image :src="quData.image" style="max-width: 100%" />
          </p>
          <div v-if="quData.quType === 1 || quData.quType === 3">
            <el-radio-group v-model="radioValue">
              <el-radio v-for="item in quData.quAnswers" :label="item.quAnswerId">{{ item.answerOption }}.{{
                item.quAnswerContent }}
                <div v-if="item.image != null && item.image != ''" style="clear: both">
                  <el-image :src="item.image" style="max-width: 100%" />
                </div>
              </el-radio>
            </el-radio-group>
          </div>
          <div v-if="quData.quType === 2">
            <el-checkbox-group v-model="multiValue">
              <el-checkbox v-for="item in quData.quAnswers" :label="item.quAnswerId">{{ item.answerOption }}.{{
                item.quAnswerContent }}
                <div v-if="item.image != null && item.image != ''" style="clear: both">
                  <el-image :src="item.image" style="max-width: 100%" />
                </div>
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div v-if="quData.quType === 4">
            <div>
              <textarea :cols="100" :rows="10" v-model="shortAnswerValue" class="el-textarea__inner" placeholder="请输入答案">
                                </textarea>
            </div>
          </div>
          <div style="margin-top: 20px">
            <el-button v-if="showPrevious" type="primary" icon="el-icon-back" @click="handPrevious()">
              上一题
            </el-button>

            <el-button v-if="showNext" type="warning" icon="el-icon-right" @click="handNext()">
              下一题
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import ExamTimer from "@/views/onlineQuestion/examTimer/index.vue";
import { fetchData, queryQuInfo, calculationScore, handPaper } from '@/api/onlineQuestion/paperQuestion'

export default {
  components: { ExamTimer },
  data() {
    return {
      showPrevious: false,
      handleText: "交卷",
      loading: false,
      showNext: true,
      // 试卷信息
      paperData: {
        leftSeconds: 99999,
        radioList: [],
        multiList: [],
        judgeList: [],
        shortAnswerList: [],
      },
      // 当前题目内容
      quData: {
        content: "",
        quId: "",
        quAnswers: [],
        quType: 0,
        quSort: 0,
      },
      // 单选选定值
      radioValue: "",
      // 多选选定值
      multiValue: [],
      // 简答题
      shortAnswerValue: "",
      // 当前待考试卷id
      waitPaperId: 0,
      //已答列表
      answeredList: [],
      //未答列表
      unAnsweredList: [],
      //总题数
      totalQu: 0,
    };
  },
  created() {
    const id = this.$route.params.waitPaperId;
    if (typeof id !== "undefined") {
      this.waitPaperId = id;
      this.fetchData(id);
    }
  },
  methods: {
    // 试卷详情
    fetchData(id) {
      const params = { waitPaperId: id };
      fetchData(JSON.stringify({ waitPaperId: id })).then(res => {
        if (res.code === 200) {
          const resultData = res.data;
          //单选题
          this.paperData.radioList = resultData.radioList;
          //多选题
          this.paperData.multiList = resultData.multiList;
          // 判断题
          this.paperData.judgeList = resultData.judgeList;
          // 简答题
          this.paperData.shortAnswerList = resultData.shortAnswerList;
          //倒计时
          this.paperData.leftSeconds = resultData.countdownSecond * 60;
          // 总题数
          this.totalQu = resultData.totalQu;
          this.answeredList = resultData.answeredList === undefined ? [] : resultData.answeredList;
          this.unAnsweredList = resultData.unAnsweredList === undefined ? [] : resultData.unAnsweredList;
          // 默认显示第一题
          this.queryQuInfo(1);
        }
      })
    },
    // 题目详情
    queryQuInfo(quSort) {
      queryQuInfo({
        quSort: quSort,
        waitPaperId: this.waitPaperId,
      }).then(res => {
        if (res.code === 200) {
          console.log(res)
          // this.$nextTick(() => {
          this.setQuData(res.data);

          // })
        }
      })
    },
    // 答题卡样式
    cardItemClass(item) {
      // 如果已答列表中存在就高亮
      if (this.answeredList.indexOf(item.quSort) != -1) {
        return "success";
      } else {
        return "info";
      }
    },
    // 点击答题卡
    clickCard(item) {
      console.log(item);
      this.showNextButton(item.quSort);
      //获取当前点击题目的信息
      this.queryQuInfo(item.quSort);
      //答题卡高亮
      this.cardItemClass(item);
    },
    //显示题目数据
    setQuData(question) {
      this.quData = question.qu;
      this.quData.quSort = question.quSort;
      // 回显已答选项
      if (question.chooseAnswerId) {
        // 单选题、判断题
        if (question.quType === 1 || question.quType === 3) {
          this.radioValue = qu.chooseAnswerId;
        }
        // 多选题
        if (question.quType === 2) {
          const array = question.chooseAnswerId.split(",");
          for (const a of array) {
            this.multiValue.push(parseInt(a));
          }
        }
        // 简答题
        if (question.quType === 4) {
          this.shortAnswerValue = question.chooseAnswerId;
        }
      }else{
        this.shortAnswerValue='';
      }
    },
    /**
     * 下一题
     */
    handNext() {
      //如果勾选了答案，就提交到后台进行计算
      if (this.multiValue.length > 0 || this.shortAnswerValue !== "") {
        // 后台打分
        this.calculationScore();
        //加入已答列表
        this.answeredList.push(this.quData.quSort);
      } else {
        // 加入未答列表
        this.unAnsweredList.push(this.quData.quSort);
      }
      // 显示选题按钮
      this.showNextButton(this.quData.quSort + 1);
      //获取下一题的信息
      this.queryQuInfo(this.quData.quSort + 1);
    },

    /**
     * 上一题
     */
    handPrevious() {
      //如果勾选了答案，就提交到后台进行计算
      if (this.multiValue.length > 0 || this.shortAnswerValue !== "") {
        this.calculationScore();
        //加入已答列表
        this.answeredList.push(this.quData.quSort);
      } else {
        this.unAnsweredList.push(this.quData.quSort);
      }
      // 显示选题按钮
      this.showNextButton(this.quData.quSort - 1);
      //获取下一题的信息
      this.queryQuInfo(this.quData.quSort - 1);
    },
    // 显示选题按钮
    showNextButton(quSort) {
      console.log(quSort);
      console.log(this.totalQu);
      //第一题不显示上一题按钮，最后一题不显示下一题按钮
      if (quSort === 0) {
        this.showNext = true;
      } else if (quSort === this.totalQu - 1) {
        this.showNext = false;
        this.showPrevious = true;
      } else {
        this.showNext = true;
        this.showPrevious = true;
      }
    },
    //打分参数
    getCalculationScoreParams() {
      const params = {};
      // 单选，判断
      if (this.quData.quType === 1 || this.quData.quType === 3) {
        params.radioAnswer = this.radioValue;
        // 多选
      } else if (this.quData.quType === 2) {
        params.checkAnswer = this.multiValue;
      } else if (this.quData.quType === 4) {
        params.shortAnswer = this.shortAnswerValue;
      }
      params.waitPaperId = this.waitPaperId;
      params.quType = this.quData.quType;
      params.quId = this.quData.quId;
      return params;
    },
    // 打分
    calculationScore() {
      calculationScore(JSON.stringify(this.getCalculationScoreParams())).then(res => {
        //清空上一题的答案
        if (res.code === 200) {
          this.radioValue = "";
          this.multiValue = [];
          this.shortAnswerValue = "";
        }
      })
    },
    // 倒计时结束自动交卷
    doHandler() {
      this.handleText = "正在交卷，请等待...";
      this.loading = true;
      handPaper(JSON.stringify(this.getCalculationScoreParams())).then(res => {
        if (res.code === 200) {
          this.$message({
            message: "试卷提交成功，即将进入试卷结果页面！",
            type: "success",
          });
        }
      })
    },
    //交卷
    handPapers() {
      handPaper({
        waitPaperId: this.waitPaperId
      }).then(res => {
        if (res.code === 200) {
          //打分
          this.$router.push({
            name: "paperResult",
            params: { examPaperId: this.examPaperId },
          });
        }
      })

    },
  },
};
</script>
<style>
.qu-content div {
  line-height: 30px;
  width: 100%;
}

.el-checkbox-group label,
.el-radio-group label {
  width: 100%;
}

.card-title {
  background: #eee;
  line-height: 35px;
  text-align: center;
  font-size: 14px;
}

.card-line {
  padding-left: 10px;
}

.card-line span {
  cursor: pointer;
  margin: 2px;
}

.box {
  height: calc(100vh - 120px);
  font-size: 14px;
  line-height: 28px;
}

.title {
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 10px;
  padding-top: 20px;
  margin-bottom: 10px;
  border-bottom: #eee 1px dotted;
}

.tags span {
  margin-right: 10px;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: hwb(210 95% 5%);
}

.bg-purple {
  border: 0px solid cornflowerblue;
  height: 200px;
}

.app-container {
  height: 100%;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 60px;
}
</style>
